<template>
  <div class="imgItem">
    <img :src="src"/>
    <div class="upload-list-cover">
      <div style="display: flex;flex-direction: column;height: 100%;">
        <div style="flex: 1;"/>
        <Icon type="ios-eye-outline" title="预览" @click.native="onPreview">
        </Icon>
        <div style="flex: 1;"/>
      </div>
    </div>
    <preview-image ref="previewImage" :images="preview.images" :showDownLoad="true"
      :showIndex="preview.showIndex" />
  </div>
</template>

<script>
  export default {
    props: {
      src: String,
      list: Array,
      index: Number
    },
    data() {
      return {
        preview: {
          images: [],
          showIndex: 0,
        },
      }
    },
    methods: {
      onPreview() {
        this.preview.images = this.list || [this.src]
        this.preview.showIndex = this.index || 0
        this.$refs.previewImage.show()
      },
    },
  }
</script>

<style scoped lang="scss">
  .imgItem:hover .upload-list-cover {
    display: block;
  }

  .imgItem {
    overflow: hidden;
    display: inline-block;
    max-width: 200px;
    max-height: 110px;
    text-align: center;
    background: #fff;
    position: relative;
    border-radius: 8px;

    .upload-list-cover {
      display: none;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(0, 0, 0, 0.6);
      border-radius: 8px;

      i {
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 0 5px;
      }
    }

    img {
      display: block;
      width: 100%;
      border: 1px solid #eeeeee;
    }
  }
</style>
